import { Form, Input, Space, Button, Switch } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import ThePagination from "@/components/ThePagination";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import TheDialog from "@/components/TheDialog";
import React, { useRef } from "react";
import "@/views/service/style/style.less";
import Add from "./component/Add";
import { apiPersonnelPage, apiPersonnelDel } from '@/request/writeOff'
import _ from 'lodash'

const SearchHeader = ({ openDialog, setSearchValue }) => {
  const formRef = useRef()
  const reset = () => {
    formRef.current.setFieldsValue({
      verificationName: '',
      verificationPersonnelId: ''
    })
    setSearchValue({})
  };
  const onFinish = values => {
    _.forIn(values, (v, k) => {
      if (!v) {
        delete (values[k])
      }
    })
    setSearchValue(values)
  }
  return (
    <div className="p-search-box service-list-sarch">
      <Form onFinish={onFinish} ref={formRef} layout="inline">
        <Form.Item name={"verificationName"}>
          <Input
            allowClear
            style={{ width: 160 }}
            suffix={<SearchOutlined />}
            placeholder={"核销员姓名"}
          />
        </Form.Item>
        <Form.Item name={"verificationPersonnelId"}>
          <Input
            allowClear
            style={{ width: 160 }}
            suffix={<SearchOutlined />}
            placeholder={"核销员ID"}
          />
        </Form.Item>
        <Form.Item>
          <Space size="small" style={{ marginLeft: 10 }}>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
            <Button onClick={reset}>重置</Button>
          </Space>
        </Form.Item>
      </Form>
      <TheButton hasPermi={['writeOff:list:add']} onClick={() => openDialog('add')} type="default" size="middle">
        新增核销员
      </TheButton>
    </div>
  );
};

class WriteOff extends React.Component {
  state = {
    columns: [
      {
        title: "核销员ID",
        dataIndex: "verificationPersonnelId",
        key: "verificationPersonnelId",
      },
      {
        title: "核销员姓名",
        dataIndex: "userName",
        key: "userName",
      },
      {
        title: "联系电话",
        dataIndex: "userMobile",
        key: "userMobile",
      },
      {
        title: "账号",
        dataIndex: "loginName",
        key: "loginName",
      },
      {
        title: "角色",
        dataIndex: "verificationMemberType",
        key: "verificationMemberType",
        render: (text, record) => {
          let txt
          switch (record.verificationMemberType) {
            case "P":
              txt = '核销员'
              break;
            case "S":
              txt =  '店长' 

              break;
            case "D":
              txt = '配送员'
              break;
            default:
              break;
          }
          return txt
        }
      },
      {
        title: "状态",
        dataIndex: "verificationStatus",
        key: "verificationStatus",
        render: (text, record) => {
          return record.verificationStatus === 'Y' ? '启用' : record.verificationStatus === 'N' ? '禁用' : '未知状态'
        }
      },
      {
        title: "操作",
        fixed: "right",
        render: (text, render) => {
          return (
            <div>
              <TheButton hasPermi={['writeOff:list:viewRecord']} onClick={() => this.goRecord(render.verificationPersonnelId)}>查看核销记录</TheButton>
              <TheButton hasPermi={['writeOff:list:edit']} onClick={() => this.openDialog('edit', render.verificationPersonnelId, render)}>编辑</TheButton>
              <TheButton hasPermi={['writeOff:list:delete']} onClick={() => this.cancelConfirm(render.verificationPersonnelId)}>删除</TheButton>
            </div>
          );
        },
      },
    ],
    data: [],
    pageData: {
      pageNo: 1,
      pageSize: 10,
    },
    total: 0,
    visible: false,
    loading: false
  };
  async componentDidMount() {
    this.getData()
  }
  getData = async () => {
    this.setState({ loading: true })
    const { pageData, searchValue } = this.state
    let res = await apiPersonnelPage({ ...pageData, ...searchValue })
    if (res.data && res.code === 0) {
      this.setState({
        pageData: {
          pageNo: res.pageNo,
          pageSize: res.pageSize
        },
        total: res.totalCount,
        data: res.data,
        loading: false
      })
    }
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo, pageSize
      }
    }, () => this.getData())
  };
  setSearchValue = searchValue => {
    this.setState({
      searchValue,
      pageData: {
        pageNo: 1,
        pageSize: 10
      }
    }, () => this.getData())
  }
  cancelConfirm = (verificationPersonnelId) => {
    React.$confirm({
      title: "您确认删除此核销员吗？",
      onOk: async () => {
        let res = await apiPersonnelDel({ verificationPersonnelId })
        if (res.code === 0) {
          React.$message({
            type: 'info',
            content: '删除成功'
          })
          this.getData()
        }
      },
    });
  };
  openDialog = (type, verificationPersonnelId, editorValue) => {
    if (type === 'edit') {
      this.setState({
        type,
        verificationPersonnelId,
        editorValue,
        visible: true,
        title: '修改核销员'
      })
    } else {
      this.setState({ visible: true, title: '新增核销员', type });
    }
  };
  dialogCancel = () => {
    this.setState({ visible: false, title: '', type: '', verificationPersonnelId: '', editorValue: null });
  };
  goRecord = (id) => {
    this.props.history.push(`/writeOff/record/${id}`);
  };
  render() {
    const { columns, data, pageData, total, visible, editorValue, verificationPersonnelId, type, title, loading } = this.state;
    return (
      <div className="p-layout-box commodity-examine">
        <SearchHeader setSearchValue={this.setSearchValue} openDialog={this.openDialog} />
        <div className="p-layout-content-pagination">
          <TheTable
            scroll={{ x: "max-content" }}
            columns={columns}
            dataSource={data}
            loading={loading}
          />
          <ThePagination
            pageNo={pageData.pageNo}
            pageSize={pageData.pageSize}
            total={total}
            pageChange={this.pageChange}
          />
          <TheDialog
            title={title}
            visible={visible}
            handleCancel={this.dialogCancel}
            footer={null}
            width={400}
          >
            <Add type={type} verificationPersonnelId={verificationPersonnelId} editorValue={editorValue} reload={this.getData} closeDialog={this.dialogCancel} />
          </TheDialog>
        </div>
      </div>
    );
  }
}

export default WriteOff;
